<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <img src="#" is="my-img" /> -->
   <my-com
     title="标题"
   >
       <div slot="myHead">插槽里的内容头部</div>
       <div slot="myFoot">插槽里的内容底部</div>
   </my-com>
   
</body>
<script>
// 1.继承html组件
// class MyImg extends HTMLImageElement{
//     constructor(){
//         super();
//         console.log(this);
//         let src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64c.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619700415&t=053aab3e3b04ab34412e5bb3ee735ad1";
//         setTimeout(()=>{
//             this.src = src;
//         },1000)
//     }
// }

// customElements.define("my-img",MyImg,{
//     extends:"img"
// })

// 2.独立自定义组件(shadow、template、slot);
let template  = document.createElement("template");
template.innerHTML = `
<style>
    div{
        background:red;
    }
</style>
<div>
    <p>123</p>
    <slot name="myHead"></slot>
    <slot name="myFoot"></slot>
</div>
`;


class MyCom extends HTMLElement{
    constructor(){
        super();
        // console.log(this);
        // this.innerHTML = `<button>点击</button>`;
        // let div = document.createElement("div");
        // div.innerHTML = "<p>123</p>"
        console.log(this.getAttribute("title"));
        let div = template.content;
        let sd = this.attachShadow({mode:"open"});
        sd.appendChild(div);
    }
}
customElements.define("my-com",MyCom);



</script>
</html>